<template>
  <div class="person-container">
    <h2>姓名：{{ uname }}</h2>
    <p>年龄：{{ age }}</p>
    <p>电话：{{ tel }}</p>
    <button @click="changeName">修改名称</button>
    <button @click="showTel">查看手机号</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const uname = ref('张三') // 定义一个变量，用于存储姓名, 但是不是响应式的，使用 ref 函数来定义一个响应式的变量，但是需要引入 ref 函数
const age = 18
const tel = '12345678901'
function changeName() {
    uname.value = '李四'
}
function showTel() {
    alert(tel)
}
    
</script>

<style scoped>
.person-container {
  /* 在这里添加组件的样式 */
  padding: 20px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>